<template>
    <div>
    </div>
</template>
<script lang="ts">
import {Component, Vue, Prop} from 'vue-property-decorator';
import MapCommon from '@/util/MapCommon';
import Medical from './Medical';
import {medicalServer} from '@/api/installServer';

@Component({
    name: 'MedicalTest',
    components: {},
    mixins: [MapCommon],
})
export default class MedicalTest extends Vue {

    private mapId: string = '';
    private getComponent: any = null;

    private mounted() {
        // 地图容器id
        this.mapId = 'map';
        (this as any).resolveMap(this.mapId).then((data: any) => {
            this.init(data.map);
        });
    }

    //  地图加载完成后，初始化
    private init(map: any) {
        const temp: any = this;
        // 地图配置
        const mapConfig = temp.$ioc.resolve(`mapConfig-${this.mapId}`);
        // 符号配置
        const symbolConfig = temp.$ioc.resolve(`symbolConfig-${this.mapId}`);
        // 通用的地图组件实例
        const GISComponents = temp.$ioc.resolve(`GISComponents-${this.mapId}`);
        //
        const component = new Medical({
            map,
            symbolConfig,
            simpleRenderMgr: GISComponents.simpleRenderMgr,
            popupManager: GISComponents.popupManager,
            PointGeometryBuilder: GISComponents.PointGeometryBuilder,
            featureLocate: GISComponents.featureLocate,
            featureHighlight: GISComponents.featureHighlight,
            service: medicalServer,
        });
        this.getComponent = () => {
            return component;
        };

        component.on('popup', (data: any) => {
            jQuery('#' + data.containerId).append('<b>' + data.data.id + '</b>');
        });
    }

    private load() {
        this.getComponent().load();
    }

    private unload() {
        this.getComponent().unload();
    }
}
</script>
<style lang="less" scoped>
</style>